/*
 * @Author: xianfuyou
 * @Date: 2022-04-03 15:06:30
 * @LastEditors: your name
 * @LastEditTime: 2022-04-07 11:40:16
 * @Description: file content
 */
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import ButtonWarpCpn from '../../../components/CommBtn/CommBtn'
import ViewImage from '../../../components/OrderCpn/ViewImage'

import {
  Row,
  Col,
  Form,
  List,
  Table,
  Tooltip,
  Image,
  Button,
  Modal,
} from 'antd'
import { DeleteFilled, CloseCircleFilled, FolderFilled } from '@ant-design/icons';
import '../FillOrder/FillOrder.css'
import '../../../components/OrderCpn/css/Model.css'
import './ViewOrder.css'
// 订单信息
export default function ViewOrder() {
  // 当前页的数据

  const navigate = useNavigate()
  const { state } = useLocation()
  const { orderInfo } = state
  const [info, setInfo] = useState(orderInfo)
  // 缩略图删除
  const [delImage, setDelImage] = useState(false)
  // 查看大图
  const [viewImg, setviewImg] = useState(false)
  // 保存当前点击的查看图片
  const [nowImageInfo, setNowImageInfo] = useState(null)
  console.log('info', info)

  useEffect(() => {
    setInfo(orderInfo)
  }, [orderInfo, state])

  // 表单配置
  const checkGoodsTable = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 50,
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      width: 120,
    },
    {
      title: '规格',
      dataIndex: 'size',
      key: 'size',
      width: 80,
    },
    {
      title: '型号',
      dataIndex: 'type',
      key: 'type',
      width: 80,
    },
    {
      title: '成本',
      dataIndex: 'cost',
      key: 'cost',
      width: 100,
    },
    {
      title: '售价',
      dataIndex: 'salePrice',
      key: 'salePrice',
      width: 100,
      editable: true,

    },
    {
      title: '数量',
      dataIndex: 'count',
      key: 'count',
      width: 100,
    },
    {
      title: '折扣',
      dataIndex: 'discount',
      key: 'discount',
      width: 100,
    },
    {
      title: '总金额',
      dataIndex: 'priceAll',
      key: 'priceAll',
      width: 100,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 150,
    },
    {
      title: '录入时间',
      dataIndex: 'enterTime',
      key: 'enterTime',
      width: 100,
    }
  ]

  const data = [
    {
      title: 'Title 1',
    },
    {
      title: 'Title 2',
    },
    {
      title: 'Title 3',
    },
    {
      title: 'Title 4',
    },
    {
      title: 'Title 2',
    },
    {
      title: 'Title 3',
    },
    {
      title: 'Title 4',
    },
  ];

  // 确认删除缩略图
  const delHandleOk = () => {
    setDelImage(false)
  }
  // 点击删除
  const delCurrImage = () => {
    setDelImage(true)
  }
  // 点击查看
  const changeImage = (value) => {
    setviewImg(true)
    setNowImageInfo(value)
  }

  return (
    <div className='viewOrder fillOrder'>
      {/* 查看详情弹窗 */}
      <ViewImage nowImage={nowImageInfo} isShow={viewImg} pHandleCancel={(res) => { setviewImg(res) }}></ViewImage>
      {/* 删除弹窗 */}
      <Modal
        className='xfy_dep_add_modal del_modal'
        title="消息"
        okText="确定"
        cancelText="取消"
        visible={delImage}
        onOk={delHandleOk}
        onCancel={() => { setDelImage(false) }}
        destroyOnClose={true}
        forceRender={true}
        zIndex={2000}
      >
        <Row align='middle' gutter={10}>
          <Col> <CloseCircleFilled style={{ color: '#faa685', fontSize: '36px' }} /></Col>
          <Col> <span>是否确定删除?</span></Col>
        </Row>
      </Modal>
      {/* 添加订单表单 */}
      <Row className={'highFrom'}>
        <Col className={'title'}>新增订单管理</Col>
        <Col className={"flag"} span={24}>
          <Row justify={'space-between'} align={'middle'}>
            <Col span={24}>
              <Form
                labelCol={{
                  span: 8,
                }}
                wrapperCol={{
                  span: 16,
                }}
              >
                {/* 表单部分 */}
                <Row className="fromDataSection">
                  <Col span={8}>
                    <Form.Item label="订单编号">
                      <Row>
                        <Col span={16}>
                          <Form.Item >
                            {info.orderId}
                          </Form.Item>
                        </Col>
                      </Row>
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={8}>
                    <Form.Item label="客户名称">
                      {info.clientName}
                    </Form.Item>
                    <Form.Item label="订单总金额">
                      <Row align="middle">
                        <Col span={16}>
                          <Form.Item >
                            <span style={{ color: '#000' }}> {info.salePriceAll} 元[商品明细总金额:<span style={{ color: '#ff0000' }}>{info.salePriceAll}元</span>]</span>
                          </Form.Item>
                        </Col>
                      </Row>
                    </Form.Item>
                    <Form.Item label="下单日期" >
                      {info.downOrder}
                    </Form.Item>
                    <Form.Item wrapperCol={{ span: 6 }} label="收货人" >
                      {info.putawayPerson}
                    </Form.Item>
                  </Col>
                  <Col span={8} offset={2}>
                    <Form.Item label="联系人">
                      <Row>
                        <Col span={9}>
                          {info.service}
                        </Col>
                      </Row>
                    </Form.Item>
                    <Form.Item wrapperCol={{ span: 6 }} label="已收款" >
                      {info.payOver} 元
                    </Form.Item>
                    <Form.Item label="交单日期" >
                      {info.overOrder}
                    </Form.Item>
                    <Form.Item wrapperCol={{ span: 10 }} label="收货人电话">
                      {info.putawayPersonPhone}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={8}>
                    <Form.Item label="收货人地址">
                      {info.putawayAddress}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24} style={{ marginLeft: '35px' }}>
                    <Form.Item
                      labelCol={{
                        span: 2,
                      }}
                      wrapperCol={{
                        span: 20,
                      }} label="附件">
                      <Row>
                        <Col className={'accessory'}>
                          <List
                            grid={{ gutter: 16, column: 8 }}
                            dataSource={data}
                            renderItem={item => (
                              <List.Item>
                                <Row justify={'center'} className={'image-list'}>
                                  <Col span={24} className={'name'}>
                                    {item.title}.jpg
                                  </Col>
                                  <Col className={'image'}>
                                    <Tooltip placement="topRight" title={'131231231'}>
                                      <Image
                                        preview={true}
                                        width={'100%'}
                                        height={'100%'}
                                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                      />
                                    </Tooltip>
                                  </Col>
                                  <Col span={24} className={'handel-btn'}>
                                    <Button size="small" onClick={() => { changeImage('https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png') }} icon={<FolderFilled />} style={{ backgroundColor: '#5294bf' }}>查看</Button>
                                    <Button size="small" onClick={() => { delCurrImage() }} icon={<DeleteFilled />} style={{ backgroundColor: '#ce5a6a' }}>删除</Button>
                                  </Col>
                                </Row>

                              </List.Item>
                            )}
                          />
                        </Col>
                      </Row>
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={8}>
                    <Form.Item label="备注">
                      {info.remark}
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            </Col>
          </Row>
        </Col>
      </Row>
      {/* 添加商品接口 */}
      <Row className={'totalCount'} justify="space-between">
        <Col style={{ fontWeight: 'bold' }}>商品明细</Col>
        <Col className={'count'}>
          成本总合：<span>2478元</span> 售价总合：<span>2478元</span> 数量总合：<span>28</span> 折扣总合：<span>0元</span> 最终总金额：<span>8300元</span>
        </Col>
        <Col></Col>
      </Row>
      {/* 选择商品表单 */}
      <Row className={'goodsLists'}>
        <Col span={24}>
          <Table
            pagination={false}
            size="small"
            columns={checkGoodsTable}
            dataSource={info.orderProduct}
          />
        </Col>
      </Row>
      <Row>
        <Col style={{ marginTop: '10px' }}>
          <ButtonWarpCpn onClick={() => { navigate(-1) }} bgcolor="#505050">返回</ButtonWarpCpn>
        </Col>
      </Row>
    </div>
  )
}
